<html>
<head>
<title>Jexcel - Javascript spreadsheet</title>
<meta name='author' content='Paul Hodel'>
<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />

<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
<meta itemprop="url" content="http://bossanova.uk/jexcel">
<meta property="og:type" content="website">
<meta property="og:site_name" content="jExcel">
<meta property="og:url" content="http://bossanova.uk/jexcel">
<meta property="og:locale" content="en_GB">
<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<script src="../dist/js/jquery.jexcel.js"></script>
<script src="../dist/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />

</head>
<body>

<div class='container'>

    <div class='row top'>

        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
        <div class='column'>

            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>

        </div>
        <div class='column'>

            <div id='search'></div>

        </div>
    </div>

    <div class='row content'>

        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>

            <div id='content-left'>

                <ul>
                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
                </ul>

            </div>
        </div>
        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>

            <div id='content'>

<div class='title'>Handling events</div>

<p>Tracking changes on your spreadsheet.</p>

<div id='mytable'></div>

<br><a href='https://jsfiddle.net/paulhodel/0dyms2b9/' alt='Working example on how to handle events on jExcel' target='jsfiddle'>See this example on jsFiddle</a><br><br>

<div>
    <button onclick="$('#log').html('')">Clear</button><br>
    <p>Log:</p>
    <div id='log' style='background-color:#c7eaff; border-radius:10px; color:#000; padding:20px'></div>
</div>

<script>
var change = function(instance, cell, value) {
    var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
    $('#log').append('New change on cell ' + cellName + ' to: ' + value + '<br>');
}

var beforeChange = function(instance, cell, value) {
    var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
    $('#log').append('The cell ' + cellName + ' will be changed<br>');
}

var insertedRow = function(instance) {
    $('#log').append('Row added<br>');
}

var insertedColumn = function(instance) {
    $('#log').append('Column added<br>');
}

var deletedRow = function(instance) {
    $('#log').append('Row deleted<br>');
}

var deletedColumn = function(instance) {
    $('#log').append('Column deleted<br>');
}

var sort = function(instance, cellNum, order) {
    var order = (order) ? 'desc' : 'asc';
    $('#log').append('The column  ' + cellNum + ' sorted by ' + order + '<br>');
}

var resize = function(instance, cell, width) {
    $('#log').append('The column  ' + cell + ' resized to width ' + width + ' px<br>');
}

var selectionActive = function(instance, firstColumn, lastColumn) {
    var cellName1 = $(instance).jexcel('getColumnNameFromId', $(firstColumn).prop('id'));
    var cellName2 = $(instance).jexcel('getColumnNameFromId', $(lastColumn).prop('id'));
    $('#log').append('The selection from ' + cellName1 + ' to ' + cellName2 + '<br>');
}

var loaded = function(instance) {
    $('#log').append('New data is loaded<br>');
}

var moverow = function(instance, rowFrom, rowTo) {
    $('#log').append('The row ' + rowFrom + ' was move to the position of ' + rowTo + ' <br>');
}

var blur = function(instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' was blur<br>');
}

var focus = function(instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' was focus<br>');
}

data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

$('#mytable').jexcel({
    data:data,
    colHeaders: ['Description','Year','Price', 'Buy'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
    ],
    onchange: change,
    onbeforechange: beforeChange,
    oninsertrow: insertedRow,
    oninsertcolumn: insertedColumn,
    ondeleterow: deletedRow,
    ondeletecolumn: deletedColumn,
    onselection: selectionActive,
    onsort: sort,
    onresize: resize,
    onmoverow: moverow,
    onload: loaded,
    onblur: blur,
    onfocus: focus,
});
</script>

<br><br>

<h2>Advanced Example</h2>

<p>Update the chart on every change in your spreadsheet, using the onchange handler</p>

<div id="container"></div>

<br>

<div id="my"></div>


<script>
var data = [
    ['Tokyo', 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    ['New York', -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
    ['Berlin', -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
    ['London', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
];

var update = function (obj, cel, val) {
    // Get the cell position x, y
    var id = $(cel).prop('id').split('-');
    // If the related series does not exists create a new one
    if (! chart.series[id[1]]) {
        // Create a new series row
        var row = [];
        for (i = 1; i < data[id[1]].length; i++) {
            row.push(parseFloat(data[id[1]][i]));
        }
        // Append new series to the chart
        chart.addSeries({ name:data[id[1]][0], data:row });
    } else {
        // Update the value from the chart
        chart.series[id[1]].data[id[0]-1].update({y:parseFloat(val)});
    }
}

$('#my').jexcel({
    data:data,
    onchange:update,
    colHeaders: [ 'Country' ],
    colWidths: [ 300 ],
    columns: [
        { type: 'text', readOnly: true }
    ]
});

// Kepp it global
var chart = null;

$(function () {
    chart = Highcharts.chart('container', {
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>



            </div>
        </div>
    </div>

</div>

</body>
</html>